<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		div.out{
			width: 730px;
			height: 454px;
		
			margin:  50px auto;
			position: relative;
		}
		div.out li {
			display: none;
		}
		div.out img{
			position: absolute;
			top: 0;
			left:0
		}
		div.out .num{
			position: absolute;
			z-index: 1;
			left: 0;	
			bottom: 20px;
			font-size: 0;
			width: 100%;
			text-align: center;
		}
		div.out .num li{
			width: 20px;
			height: 20px;
			background: #666;
			color: #fff;
			text-align: center;
			line-height: 20px;
			border-radius:50% ;
			font-size: 16px;
			margin: 0 3px;
			cursor: pointer;
			display: inline-block;
			
		}
		div.out .num li.active{
			background: #a00;
		}
		div.out .btn{
			position: absolute;
			top: 50%;
			display: none;
			margin-top: -30px;
			width: 30px;
			height: 60px;
			color: #fff;
			text-align: center;
			line-height: 60px;
			font-size: 40px;
			background: rgba(0,0,0,0.5);
			
		}
		div.out .let{
			left: 0;
		}
		div.out .right{
			right: 0;
		}
		div.out:hover .btn{
			cursor: pointer;
			display: block;
		}
	</style>
	<body>
		<div class="out">
			<ul class="img">
				<li><a href=""><img src="img/1.jpg" /></a></li>
				<li><a href=""><img src="img/2.jpg" /></a></li>
				<li><a href=""><img src="img/3.jpg" /></a></li>
				<li><a href=""><img src="img/1.jpg" /></a></li>
				<li><a href=""><img src="img/2.jpg" /></a></li>
				<li><a href=""><img src="img/3.jpg" /></a></li>
			</ul>
			<ul class="num">
			</ul>
			<div class="left btn">
				<
			</div>
			<div class="right btn">
				>
			</div>
		</div>
	</body>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
	<script>
		$(function(){
			//代码初始化
			var size = $('.img li').size()
			for(var i = 1;i<=size;i++){
				var li = "<li>"+i+"</li>"
				$('.num').append(li)
			}
		
			//手动控制轮播
			$('.img li').first().show()
			$('.num li').first().addClass('active')
			$('.num li').mouseover(function(){
				$(this).addClass('active').siblings().removeClass('active')
				var index = $(this).index()
				i=index
				//console.log(index)
				$('.img li').eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300)
			})
			//自动控制
		    var i = 0
			var a = setInterval(move,1000)
			//向右的
			function move(){
				i++
				if(i == $('.num li').length	){
					i = 0				
				}
					$('.img li').eq(i).fadeIn(300).siblings().fadeOut(300)
				$('.num li').eq(i).addClass('active').siblings().removeClass('active')
			}
			
			//向左的
			function leftmove(){
				i--
				if(i ==-1){
					i = $('.img li').length-1				
				}
				$('.img li').eq(i).fadeIn(300).siblings().fadeOut(300)
				$('.num li').eq(i).addClass('active').siblings().removeClass('active')
			}
			$('.out').hover(function(){
			clearInterval(a)
			},function(){
					 a = setInterval(move,1000)
			})
			$('.left').click(function(){
				 leftmove()
			})
			$('.right').click(function(){
				 move()
			})
		})
		
	</script>
</html>
